<!-- 电子围栏基本信息 -->
<!DOCTYPE>
<html>

<head>
    <%- include ../taglib/layout-map.ejs %>


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>围栏管理</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div>
                            <form role="form" class="form-inline " style="padding-left:20px">
                                <div class="input-group div-serch-input">
                                    <input type="text" placeholder="请录入道路名称" class="input form-control" id="serchStrMap">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="querymap()">
                                            <i class="fa fa-search"></i> 搜索</button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                            <div id="map" style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
                            <div id="app-right-top">
                                <div id="user-center" class="ui3-user-center-wrap">
                                    <div class="avatar-abstract"></div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
        <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>围栏列表</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row" id="">
                        <div class="row">
                            <div>
                                <form role="form" class="form-inline " style="padding-left:20px">
                                    <div class="input-group div-serch-input">
                                        <input type="text" placeholder="请录入名称查询" class="input form-control" id="serchStr">
                                        <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="query()">
                                            <i class="fa fa-search"></i> 搜索</button>
                                    </span>
                                    </div>
                                    <!--<div class="form-group  div-serch-input">-->
                                        <!--<button class="btn btn-danger " type="button" onclick="editLineDis()"><i class="fa fa-close"></i> 里程修正-->
                                        <!--</button>-->
                                    <!--</div>-->
                                    <div class="form-group  div-serch-input">
                                        <button class="btn btn-danger " type="button" onclick="dels()"><i class="fa fa-close"></i> 批量删除
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div>
                            <table id="example"
                                   class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr>

                                    <th width="200px">id</th>
                                    <th width="200px">围栏名称</th>
                                    <th width="200px">围栏类型</th>
                                    <th width="200px">预计耗时</th>
                                    <th width="200px">数据</th>
                                    <th width="200px">中心点</th>
                                    <th width="200px">里程</th>

                                    <th width="200px" class="show-detail-json">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                        <div class="modal inmodal" id="myModal" role="dialog" data-width="500px"
                             data-height="400px" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content animated bounceInRight">
                                    <div class="modal-header">
                                        <h4 class="modal-title">电子围栏</h4>
                                    </div>
                                    <div class="modal-body" style="max-height: 400px; ">

                                        <form class="form-horizontal m-t" id="editForm" method="get">
                                            <input id="id" name="id" type="hidden">
                                            <input id="fenceType" name="fenceType" type="hidden">
                                            <input id="memo" name="memo" type="hidden">
                                            <input id="contentinfo" name="contentinfo" type="hidden">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">围栏名称</label>
                                                <div class="col-sm-8">
                                                    <input id="settingname" name="settingname" class="form-control"
                                                           placeholder="名称必填" type="text" aria-required="true"
                                                           aria-invalid="true">
                                                </div>
                                            </div>
                                            <div class="form-group hidden" id="settingname_div">
                                                <label class="col-sm-3 control-label">预计耗时(分钟)</label>
                                                <div class="col-sm-8">
                                                    <input id="lineTime" name="lineTime" class="form-control"
                                                           placeholder="预计耗时" type="text" number="true" value="25">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">

                                        <button type="button" class="btn btn-white" onclick="closeModal()">关闭</button>
                                        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal inmodal" id="myModal1" role="dialog" data-width="500px"
                             data-height="400px" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content animated bounceInRight">
                                    <div class="modal-header">
                                        <h4 class="modal-title">数据修正</h4>
                                    </div>
                                    <div class="modal-body" style="max-height: 400px; ">

                                        <form class="form-horizontal m-t" id="editForm1" method="get">
                                            <input id="id" name="id" type="hidden">
                                            <div class="form-group" >
                                                <label class="col-sm-3 control-label">里程</label>
                                                <div class="col-sm-8">
                                                    <input id="lineDis1" name="lineDis" class="form-control"
                                                           placeholder="里程" type="text" number="true" value="1">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">预计耗时(分钟)</label>
                                                <div class="col-sm-8">
                                                    <input id="lineTime1" name="lineTime" class="form-control"
                                                           placeholder="预计耗时" type="text" number="true" value="25">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">

                                        <button type="button" class="btn btn-white" onclick="closeModal1()">关闭</button>
                                        <button type="button" class="btn btn-primary" onclick="saveDis()">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include ../taglib/layout-content.ejs %>

<script type="text/javascript">
    var table;
    var validator;
    var validator1;
    $(document).ready(function () {
        table = $('.dataTables-example').dataTable({
            "lengthChange": false,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
            scrollX:true,
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/baseCommonFence/list",
                "dataSrc": "rows"
            },
            serverSide: true,
            columns: [
                {"sClass": "text-center", data: 'id'},
                {"sClass": "text-center", data: 'settingname', "bSortable": false, "orderable": false},
//                1-兴趣点 2-区域圆形 3-区域多边形 4-路线折线
//                {"sClass": "text-center", data: 'fenceType', "bSortable": false, "orderable": false},
                {
                    "bSortable": false,//禁止排序
                    "orderable": false,
                    "sClass": "text-center",
                    data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                        var ftype = d.fenceType;
                        var stype="";
                        if(ftype=="1"){
                            stype = "兴趣点";
                        }else if(ftype=="2"){
                            stype = "区域圆形";
                        }else if(ftype=="3"){
                            stype = "区域多边形";
                        }else if(ftype=="4"){
                            stype = "路线折线";
                        }

                        return stype
                    }
                },
                {"sClass": "text-center", data: 'lineTime', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'contentinfo', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'memo', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'lineDis', "bSortable": false, "orderable": false},


                {
                    "bSortable": false,//禁止排序
                    "orderable": false,
                    "sClass": "text-center",
                    data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                        var id = d.id
                        var index = g.row
                        return '' +
                            '<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="edit(' + index + ')" data-toggle="modal"   ><i class="fa fa-edit"></i> <span class="bold">预览</span>' +
                            '<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="editLineDis(' + index + ')" data-toggle="modal"   ><i class="fa fa-edit"></i> <span class="bold">编辑</span>' +
                            '<button class="btn btn-danger btn-sm btn-select-row" type="button"  onclick="del(' + id + ')" ><i class="fa fa-close"></i> <span class="bold">删除</span>';

                    }
                }
            ],
            //排序
//            'order': [[1, 'desc']],
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(0, false);
                visiblecolumn(4, false);
                visiblecolumn(5, false);
            },
        });

        //验证
        var cusrules = {
            rules: {
                settingname: {
                    required: true,
                },
                lineTime: {
                    required: true,
                },
                lineDis: {
                    required: true,
                },
            },
            messages: {
                settingname: {
                    required: icon + "请输入名称"
                },
                lineTime: {
                    required: icon + "请输入时间"
                },
                lineDis: {
                    required: icon + "请输入里程"
                }
            }

        };
        validator = $("#editForm").validate(cusrules);
        validator1 = $("#editForm1").validate(cusrules);
//        下拉列表
        $("#myModal").on("shown.bs.modal", function () {
////            静态数据或者从后台获取动态数据 此处为comb的id和数据数据ajax获取
            //loadComb("baseCarNoColour",combColor);

        })

    });
    function addFence(str,flag,memo) {
     $("#myModal").modal("show");
     $("#contentinfo").val(str);
     $("#fenceType").val(flag);
     $("#memo").val(memo);
     $("#lineTime").val(0);
     if(flag=="4"){
         $("#settingname_div").removeClass('hidden').addClass('show');
     }else{
         $("#settingname_div").removeClass('show').addClass('hidden');
     }
     clearAlldrawingModes();
    }
    function edit(index) {
        clearAlldrawingModes();
        var data = table.DataTable().rows(index).data()
        if (data && data[0]) {
            //loadComb("baseCarNoColour",combColor);
//            $('#editForm').resetForm();
            var contentinfo=data[0].contentinfo;
            var memo=data[0].memo;
            var fenceType=data[0].fenceType;
            if(fenceType && fenceType==1 && contentinfo){
                var array=contentinfo.split(",")
                addDrawingMark(array[0], array[1]);
            }else if(fenceType && fenceType==2 && contentinfo){
                var radius=contentinfo.split(";")[1];
                var array=contentinfo.split(";")[0].split(",")
                addDrawingCircle(array[0], array[1],radius);
            }else if(fenceType && fenceType==3 && contentinfo){
                var points=contentinfo.split(";");
                var array=memo.split(",")
                addDrawingPolygon(points,array[0],array[1]);
            }else if(fenceType && fenceType==4 && contentinfo){
                var points=contentinfo.split(";");
                debugger;
                var array=memo.split(",")
                addDrawingPolyline(points,array[0],array[1]);
            }

        } else {
            swal("已取消", "数据错误！", "warning");
        }
    }
    function del(id) {
        swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除！",
                cancelButtonText: "让我再考虑一下…",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: "GET",
                        url: "/baseCommonFence/del",
                        cache: false,
                        async: false,
                        data: {
                            ids: id
                        },
                        dataType: "json",
                        success: function (data) {
//                            swal("删除成功！", "您已经永久删除了这条信息。", "success");
                            swal("删除成功！", data, "success");
                            query();
                        }
                    });

                } else {
                    swal("已取消", "您取消了删除操作！", "error");
                }
            });
    }
    function editLineDis(index) {
        var data = table.DataTable().rows(index).data()
        if (data && data[0]) {
            $('#editForm1').loadDate(data[0]);
            $("#myModal1").modal("show");
        }
    }
    function dels() {

        var rows = table.DataTable().rows('.selected').data();
        if (rows && rows.length >= 1) {

            var ids = "";
            rows.each(function (value) {
                ids += value.id + ",";
            })
            debugger;
            del(ids);
        } else {
            swal("系统提示", "请选择需要删除的数据！", "warning");
        }

    }
    function query() {
        var start = $("#start").val();
        var end = $("#end").val();
        var code = $("#serchStr").val();
        var jsonstr = [{"start": start}, {"end": end}, {"code": code}];
        table.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }
    function querymap() {
        var code=$("#serchStrMap").val();
        if(code){
            local.search(code);
        }else{
            swal({
                title: "系统提示",
                text:"请录入检索条件",
                type: "warning"
            });
        }

    }
    function save() {
        $('#editForm').ajaxSubmit({
            type: 'post', // 提交方式 get/post
            dataType: 'json',
            url: '/baseCommonFence/save', // 需要提交的 url
            beforeSubmit: function (formData, jqForm, options) {
                if (!$("#editForm").valid()) {
                    return false;
                }
            },
            success: function (data) {
                // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                if (data.success) {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "success"
                    });
                    $("#myModal").setDefForm(validator);
                    $('#editForm').clearForm(true);
                    $("#myModal").modal("hide");
                    query();
                } else {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "error"
                    });
                }
                clearAlldrawingModes();
            },

        });
    }
    function closeModal() {
        $("#myModal").setDefForm(validator);
        $("#myModal").modal("hide");
        clearAlldrawingModes();
    }
    function closeModal1() {
        $("#myModal1").setDefForm(validator1);
        $("#myModal1").modal("hide");
    }
    function saveDis() {
        $('#editForm1').ajaxSubmit({
            type: 'post', // 提交方式 get/post
            dataType: 'json',
            url: '/baseCommonFence/saveDis', // 需要提交的 url
            beforeSubmit: function (formData, jqForm, options) {
                if (!$("#editForm1").valid()) {
                    return false;
                }
            },
            success: function (data) {
                if (data.success) {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "success"
                    });
                    $("#myModal1").setDefForm(validator1);
                    $('#lineDis1').val("");
                    $('#lineTime1').val("");
                    $("#myModal1").modal("hide");
                    query();
                } else {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "error"
                    });
                }
                clearAlldrawingModes();

            },

        });
    }
    //隐藏和显示列 c:列0开始，visible=false隐藏
    function visiblecolumn(c, visible) {
        table.DataTable().column(c).visible(visible)
    }
    function loadComb(id, data) {
        $("#" + id).select2({
            data: data,
            theme: "bootstrap",
            placeholder: '请选择',
            allowClear: true
        });
    }
</script>

<!--map-->
<script type="text/javascript">
    // 百度地图API功能
    var map;
    var carIocnPath="/js/mapPlugins/img/";
    var lastMark=[];
    var lastCarMark={};//终端数组
    var drawingManager;
    var local;
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 330,     // 信息窗口高度
//        title : "实时信息" , // 信息窗口标题
        panel  : "panel",
        enableMessage:true,//设置允许信息窗发送短息
        searchTypes   :[
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    };
    //    var carIcon="car_online0.fw";
    $(function () {
        map = new BMap.Map('map');
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom();
//        map.addControl(new BMap.MapTypeControl());
        var contextMenu =settxtMenuItem(new BMap.ContextMenu());
        map.addContextMenu(contextMenu);
        var jw="<%=jw%>";
        local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        initPoint(jw);
        drawingManager=initDrawingManager();
    });
</script>

<script>
    $(function () {

        parent.menuclick();
    });
</script>
</body>

</html>
